<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="../style/login.css">
    <link rel="stylesheet" href="../libs/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../libs/font-awesome-4.7.0/css/font-awesome.css">
    <script src="../js/vue-2.6.12.js"></script>
    <script src="../js/axios-0.21.0.js"></script>
    <script src="../js/vue-router-3.4.9.js"></script>
    <script src="../js/qs-6.9.4.js"></script>
</head>

<body>
    <div class="header">
        <h2>新零售后端管理系统</h2>
    </div>
    <div class="containers" id="app">
        <form class="form-horizontal connet">
            <h2>登录页面</h2>

            <!-- 用户名 -->
            <div class="input-group">
                <span class="input-group-text"><i class="fa fa-user"></i> </span>
                <input type="text" class="form-control" placeholder="请输入用户名" v-model="user.username">
            </div>
            <!-- 密码 -->
            <div class="input-group">
                <span class="input-group-text"><i class="fa fa-lock"></i> </span>
                <input type="password" class="form-control" placeholder="请输入密码" v-model="user.password">
            </div>
            <!-- 验证码 -->
            <!-- <div class="form-group"> -->
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入验证码" v-model="user.code">
                <span class="input-group-text"><img src="/shop/getCode" width="50px" height="28px" alt=""> </span>
            </div>
            <!-- </div> -->

            <div class="form-group btns">

                <button type="button" class="btn btn-primary" @click="login">登录</button>
            </div>
            <a href="reg.html" style="float: right;">还没注册、快去注册吧</a>
        </form>
    </div>
<script>
    /*const router = new VueRouter({
     routes:[
         {name:"register",path:"/",redirect:"/login"}
     ]
    })*/
    const app = new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            login(){
                axios.post("/shop/user/login",Qs.stringify(this.user)).then(resp=>{
                   if(resp.data.login){
                       alert("登录成功")
                        location.href="/shop/views/index.html"
                    }else{
                        alert("登录失败原因为："+resp.data.msg)
                       /* this.user={}*/
                    }
                }).catch(e=>{
                    console.log(e)
                })
            }
        }
    })
</script>
</body>

</html>